<template id="selectSpare">
    <div>
        <el-dialog :title="nowLangue.selectSpare" :visible.sync="dialogFormVisible" @close="closeDialog" :closeOnClickModal="false" :close-on-press-escape="false" :lock-scroll="false">
            <el-form :model="chooseSpareForm" :inline="true">
                <!-- 备件编码 -->
                <el-form-item :label="nowLangue.code" >
                    <el-input size="mini" v-model="chooseSpareForm.code" auto-complete="off" :placeholder="nowLangue.pleaseImport+nowLangue.code"></el-input>
                </el-form-item>
                <!-- 备件名称 -->
                <el-form-item :label="nowLangue.name" >
                    <el-input size="mini" v-model="chooseSpareForm.name" auto-complete="off" :placeholder="nowLangue.pleaseImport+nowLangue.name"></el-input>
                </el-form-item>
                <el-form-item>
                    <!--查询-->
                    <el-button type="danger" class="bolder outsideBtnBS selectAll" :disabled="selectDisabled" size="mini" @click="handleQuerySpare()" v-text="nowLangue.query"></el-button>
                    <!--确定-->
                    <el-button type="danger" class="bolder outsideBtnBS" size="mini" @click="handleConfirm" v-text="nowLangue.confirm"></el-button>
                </el-form-item>
            </el-form>
            <el-table :data="spareTableData" border style="width: 100%;" v-loading.body="spareLoading" :element-loading-text="nowLangue.loading">
                <!--序-->
                <el-table-column type="index" header-align="center" align="center" :label="nowLangue.sequence"  width="40"></el-table-column>
                <!--选择-->
                <el-table-column :label="nowLangue.select" header-align="center" align="center" width="40">
                    <template scope="scope">
                        <el-radio size="mini" v-model="selectedSpareCode" :label="scope.row.code" :value="scope.row.name">&nbsp;</el-radio>
                    </template>
                </el-table-column>
                <!--备件编码-->
                <el-table-column prop="code" :label="nowLangue.code" header-align="center" show-overflow-tooltip></el-table-column>
                <!--备件名称-->
                <el-table-column prop="name" :label="nowLangue.name" header-align="center" show-overflow-tooltip></el-table-column>
            </el-table>
            <!--分页 -->
            <el-pagination  v-if="spareIsPaging" @size-change="handleSpareSizeChange" @current-change="handleSpareCurrentChange"  :current-page.sync="currentPage3" :current-page="sparePageIndex"   :page-sizes="[5, 10, 15 , 20, 25]" :page-size="sparePageSize" layout="total, sizes, prev, pager, next, jumper" :page-count="spareTotalPage" :total="spareTotalNumber"></el-pagination>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        name:"v-selectSpare",
        data(){
            return {
                nowLangue:{},
                //查询禁用
                selectDisabled:false,
                dialogFormVisible:false,
                chooseSpareForm:{
                    code:"",
                    name:""
                },
                spareLoading:false,
                spareIsPaging:false,
                spareTableData:[],   // 备件列表
                sparePageIndex:1,
                sparePageSize:10,
                spareTotalPage:1,
                spareTotalNumber:10,
                currentPage3:3,
                // 单选时  选中的备件编码
                selectedSpareCode:"",
                // 单选时  选中的备件名称
                selectedSpareName:"",
            }
        },
        props:{
            // 以弹窗形式打开   true打开窗口   false关闭窗口
            dialogVisible:{
                type:Boolean,
                default:false
            },
            data:{
                type:Object,
                default(){
                    return {}
                }
            }
        },
        created:function(){
            var _this = this;
            _this.languageType=="zh"?_this.nowLangue=_this.language.zh:_this.nowLangue=_this.language.en;
        },
        computed:{
            languageType(){
                var _this = this;
                return _this.$store.state.languageType;
            }
        },
        watch:{
            languageType(){
                var _this = this;
                _this.languageType=="zh"?_this.nowLangue=_this.language.zh:_this.nowLangue=_this.language.en;
            },
            selectedSpareCode(val){
                var _this = this;
                _this.selectedSpareCode = val;
                _this.getSpareName(val);
            },
            dialogVisible(val){
                this.dialogFormVisible=val;
                if(this.dialogFormVisible){
                    this.selectedSpareCode="";
                    this.selectedSpareName="";
                }
            },
            dialogFormVisible(val){
                this.$emit('closeDialog',val);
            }
        },
        mounted:function(){
            var _this = this;
            // //ajax前后查询按钮禁用
            // $(".selectAll").ajaxStart(function(){
            //     _this.selectDisabled=true;
            // });
            // $(".selectAll").ajaxStop(function(){
            //     _this.selectDisabled=false;
            // });
            this.handleQuerySpare();
        },
        methods:{
            // 查询按钮
            handleQuerySpare(){
                var _this = this;
                var tmp={code:_this.chooseSpareForm.code,name:_this.chooseSpareForm.name,pageIndex:_this.sparePageIndex,pageSize :_this.sparePageSize};
                _this.selectDisabled=true;
                $.ajax({
                    type: 'POST',
                    url: _this.metadata_service+"material/searchEnabled",
                    cache: false,
                    data:JSON.stringify(tmp),
                    dataType:'JSON',
                    contentType: "application/json;charset=utf-8",     //*****
                    success: function (data) {
                        if (data.success) {
                            _this.spareLoading=false;
                            _this.spareTableData=data.data.materialList;
                            _this.spareTotalNumber=data.data.totalNumber;    //总条数
                            _this.spareTotalPage=data.totalPage;    //总页数
                            
                            if(_this.spareTableData && _this.spareTableData.length){
                                _this.spareIsPaging = true;
                            }
                        }else{
                            _this.common.errorTip(data.errorMessage);
                        }
                        _this.selectDisabled=false;
                    }
                });                
            },
            // 单选时 根据选中元素的code 取名称
            getSpareName(code){
                var _this = this;
                for(var i=0;i<_this.spareTableData.length;i++){
                    if(_this.spareTableData[i].code == code){
                        _this.selectedSpareName = _this.spareTableData[i].name;
                    }
                }
            },
            //关闭弹窗
            closeDialog(){
                this.dialogFormVisible=false;
            },
            // 确定按钮
            handleConfirm(){   //选择备件弹窗  确定按钮  
                var _this = this;
                var selectedSpare={};
                selectedSpare.selectedSpareName = _this.selectedSpareName;
                selectedSpare.selectedSpareCode = _this.selectedSpareCode;
                _this.$emit('selected-spare',selectedSpare);
            },
            // 分页
            handleSpareSizeChange(val){
                // console.log(`每页 ${val} 条`);
                var _this=this;
                _this.sparePageSize=val;
                _this.handleQuerySpare();
            },
            // 点击页码分页查询点击事件
            handleSpareCurrentChange(val){
                // console.log(`当前页: ${val}`);
                var _this=this;
                _this.sparePageIndex=val;
                _this.handleQuerySpare();
            }
        }
    }
</script>
